<template>
  <view class="page">
    <view class="page-title">活动</view>
    <scroll-view class="page-scroll-view" scroll-y="true">
      <view class="activity-list">
        <Activity
          v-for="item in activityList"
          :key="item.id"
          :id="item.id"
          :title="item.title"
          :imageUrl="base_url + item.imageUrl"
          :date="item.date"
          :duration="item.duration"
          :location="item.location"
          :wantToGoCount="item.wantToGoCount"
        />
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { base_url } from "../../api/config";
import { activity as activityService } from "../../service/activity";
import Activity from "../../components/treeHole/Activity.vue";
import { ref } from "vue";

// 活动内容
const activityList = ref([
  // {
  //   id: 1,
  //   title: "阳光“心”旅————户外心理探索活动",
  //   imageUrl: "/static/activity_default.jpg",
  //   date: "2025-6-6",
  //   duration: "15:30-18:00",
  //   location: "佛山·绿湖公园",
  //   wantToGoCount: 23,
  // },
]);

const perGetCount = 4
let nextCursor = null;

async function getActivitys(cursor, limit) {
  const data = await activityService.getActivityList(cursor, limit);
  return data;
}

async function initGet() {
  const data = await getActivitys(undefined, perGetCount);
  nextCursor = data.nextCursor;
  activityList.value = data.items;
}
initGet();

async function onReachBottom() {
  if (!nextCursor) {
    return;
  }
  const data = await getActivitys(nextCursor, perGetCount);
  nextCursor = data.nextCursor;
  if (data.items.length > 0) {
    activityList.value.push(...data.items);
  }
}

async function onRefresh() {
  nextCursor = null;
  activityList.value = [];
  await initGet();
  uni.stopPullDownRefresh();
}

defineExpose({
  onReachBottom,
  onRefresh,
});

</script>

<style scoped lang="less">
.page-title {
  text-align: center;
  font-size: 5vw;
  font-weight: 900;
  background-color: rgb(255, 215, 172);
  padding: 20vw 0 10vw;
}

.page-scroll-view {
  box-sizing: border-box;
  width: 100%;
  padding: 3vw;

  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 30vw;
  }
}
</style>
